<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
  <div id="app" class="container">
    <h1>vue-resource</h1>
    <a class="btn btn-primary" v-on:click="get">Get请求</a>
    <a href="javascript:;" class="btn btn-primary" @click="post">Post请求</a>
    <a href="javascript:;" class="btn btn-primary" @click="jsonp">JSONP请求</a>
    <a href="javascript:;" class="btn btn-primary" @click="http">HTTP请求</a>
    <div>
      <span>{{msg}}</span>
    </div>
  </div>
  <script>
      new Vue({
        el:"#app",
        data:{
          msg:''
        },
        mounted:function () {
          Vue.http.interceptors.push(function (request,next) {
            console.log("request init.")
            next(function (response) {
              console.log("response init.")
              return response;
            })
          })
        },
        http:{//配置全局地址
          // root:"localhost:8080"
        },
        methods:{
          get:function () {
            this.$http.get("package.json",{
              params:{
                userId:"101"
              },
              headers:{
                token:"abcd"
              }
            }).then(res=>{
               this.msg=res.data;
            },error=>{
                this.msg=error;
            }
            );
          },
          post:function () {
            this.$http.post("package.json",{
              userId:"102"
            },{
              headers:{
                access_token:"abc"
              }
            }).then(function (res) {
              this.msg=res.data;
            });
          },
          jsonp:function () {
            this.$http.jsonp("package.json",{
              userId:"102"
            },{
              headers:{
                access_token:"abc"
              }
            }).then(function (res) {
              this.msg=res.data;
            });
          },
          http:function () {
            this.$http({
              url:"package.json",
              params:{
               userId:"102"
              },
              headers:{
                access_token:"abc"
              },
              timeout:5,
                before:function () {
                  console.log("before");
                }
            }).then(function (res) {
              this.msg=res.data;
            });
          }
        }
      })
  </script>
</body>
</html>
